<template>
	<view class="list-box left clearfix">
		<!--筛选-->
		<view class="list-screen-box left clearfix">
			<view class="list-screen-left left clearfix">
				<text>全部</text>
				<text>最近</text>
				<text>探店</text>
				<text>品宣</text>
				<text>云剪</text>
				<text>电商</text>
			</view>
			<view class="list-screen-right right">
				<label>
					<uni-icons type="icon-shaixuan4" color="#666" size="15" custom-prefix="iconfont"></uni-icons>
				</label>
				<label>
					筛选
				</label>
			</view>
		</view>
		<view class="list-item-box left clearfix bai" v-for="(item,index) in 10">
			
			<view class="list-image left clearfix">
				<image src="https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/images/s1.jpg" mode="aspectFill"></image>
			</view>
			<view class="list-text-box left clearfix">
				<view class="list-text-title left clearfix">
					<text>扫码直发</text>
					<text>景尚医馆 发完回填 高佣金</text>
				</view>
				<!--要求开始-->
				<view class="list-ftext left clearfix">
					<label>等级 ＞ lv.3</label>
					<label>粉丝 ＞ 3w</label>
				</view>
				<!--价格-->
				<view class="list-price left clearfix">
					<view class="list-price-left left clearfix">
						<view class="list-price-top left">
							<label class="list-price-icon">￥</label>
							<label class="list-price-number">256</label>
							<label class="list-price-right">/人</label>
						</view>
						<view class="list-price-bottom left">
							包括车马费
						</view>
					</view>
					<view class="list-price-rights right clearfix">
						<text>2%</text>
						<text>CPS</text>
					</view>
				</view>
			</view>
			
			<!--报名进度-->
			<view class="list-progress-box left cleafix">
				<label class="list-progress-title">报名进度：</label>
				<label class="list-progress-bai"><progress :percent="70" activeColor="#ff6739" :show-info="false" stroke-width="6" border-radius="5" /></label>
				<label class="list-progress-time" style="float:right;">距报名结束:20天</label>
			</view>
		</view>
	</view>
</template>

<style scoped>
	.list-screen-right label{float:left;line-height:3rem;height:3rem;color:#666;margin-left:.3rem;font-size:.9rem;}
	.list-screen-right{width:18%;line-height:3rem;height:3rem;}
	.list-screen-left text{margin-left:.5rem;margin-right:.5rem;font-size:.9rem;color:#666;}
	.list-screen-left{width:80%;height:3rem;line-height:3rem;}
	.list-item-box{width:100%;height:8rem;background:#fff;border-radius: 5px;margin-top:.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
	.list-screen-box{width:100%;height:3rem;line-height:3rem;background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);border-radius: 5px;}
	.list-progress-time{width:30%;font-size:.8rem;color:#999;}
	.list-progress-bai{width:40%;height:.5rem;margin-top:.9rem;margin-left:.5rem;}
	.list-progress-title{width:5rem;color:#999;font-size:.8rem;text-align: center;}
	.list-progress-box label{float:left;height:2rem;line-height:2rem;}
	.list-progress-box{width:100%;height:2rem;}
	.list-price-bottom{width:90%;line-height:1.2rem;font-size:.7rem;color:#999;text-align:left;}
	.list-price-top{width:100%;height:1rem;line-height:1rem;}
	.list-price{width:100%;line-height:2rem;height:2rem;}
	.list-price-rights text:last-child{font-size:.7rem;color:#999;line-height:1.2rem;}
	.list-price-rights text:first-child{color:#ff6739;}
	.list-price-rights text{float:left;width:100%;line-height:1rem;text-align: center;}
	.list-price-rights{width:3rem;height:2rem;}
	.list-price-right{font-size:.7rem;color:#999;margin-left:.2rem;}
	.list-price-number{font-size:1.1rem;color:#ff6739;}
	.list-price-icon{font-size:.7rem;color:#ff6739;}
	.list-price-left{width:5rem;height:1.5rem;}
	.list-ftext label{float:left;line-height:1.5rem;margin-right:.5rem;font-size:.8rem;color:#999;}
	.list-text-title text:last-child{font-size:.9rem;line-height:1.3rem;height:1.3rem;margin-left:.5rem;margin-top:.15rem;}
	.list-text-title text:first-child{padding-left:.2rem;padding-right:.2rem;background:#ff6739;font-size:.8rem;color:#fff;border-radius: 3px;line-height:1.2rem;margin-top:.15rem;height:1.2rem;}
	.list-text-title text{float:left;line-height:1.5rem;height:1.5rem;}
	.list-text-title,.list-ftext{width:100%;height:1.5rem;line-height:1.5rem;}
	.list-text-box{width:calc(100% - 6.5rem);height:5rem;margin-top:.5rem;}
	.list-image image{width:100%;height:100%;}
	.list-image{width:5rem;height:5rem;margin:.5rem;border-radius: 5px;overflow: hidden;}
	.list-box{width:100%;}
</style>

<script>
</script>

